* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 变量声明
$bgColor: #ffffff; // 背景颜色
$size: 1.32vw; // 字体大小
$padding: $size;
html, body, #root {
  width: 100%;
  min-width: 100%;
  overflow: auto;
  font-size: $size;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}


//混合样式
@mixin flex {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

@mixin font($sizeColor, $fontsize) {
  font: {
    size: $fontsize;
    weight: 500;
  };
  color: $sizeColor;
  text-align: center;
}

//媒体查询
@media screen {
  html, body, #root {
    @media (max-width: 820px) {
      width: 100%;
    }
  }
}

//主体框架
//头部通栏 header
.header {
  width: max-content;
  min-width: 100%;
  background: $bgColor;
  box-shadow: 0 3px 3px #bfbfbf;
  margin-bottom: $size;

  & > div {
    padding: $size 10%;
    @include flex;
  }

  & .logo img {
    width: $size * 13;
  }

  & .headerNav ul {
    @include flex;

    & li a {
      padding: 0 $padding $padding;
      font-size: $size;

      &:hover, &.headerCC {
        color: red;
      }
    }
  }
}

//页面内容content

//轮播 slideshow
.slideshow {
  & img {
    width: 100%;
  }
}

//内容 contentMain
.contentMain {
  padding: $padding 10% $padding * 4 10%;
  margin-bottom: 12px;

  //混合
  @mixin before( $bottom, $left, $beforeSize, $color: white) {
    position: relative;
    &::before {
      position: absolute;
      font-size: $beforeSize;
      color: $color;
      bottom: $bottom;
      left: $left;
    }
  }

  //标头
  .main_title {
    font-size: $size * 1.5;
    text-align: center;

    span {
      padding-bottom: $padding * 0.5;
      display: inline-block;
      width: $size * 25;
      border-bottom: $size * 0.1 solid #ececec;
      @include before(-$size * 1.8, $size * 12.2, $size * 3, red);

      &::before {
        content: "·"
      }
    }
  }

  //内容
  .main_content {
    margin-top: $padding * 0.1;

    ul {
      display: flex;
      margin-top: $padding * 1.5;

      & li {
        margin: 0 $padding;

        p:nth-of-type(1) {
          @include font(#1e1e1e, $size * 1);
          margin-bottom: $padding * 0.5;
        }

        p:nth-of-type(2) {
          @include font(#1e1e1e, $size * 0.7);
        }

        .main_img {
          width: 100%;
        }
      }


    }
  }

  //第一行
  &.main_class_1 {
    @for $i from 1 through 4 {
      & li:nth-child(#{$i}) div {
        background: darken(adjust-hue(#1b96d5, ($i - 1) * -72deg), 3%);
      }
    }

    .main_content div {
      width: $size * 6;
      height: $size * 6;
      margin: $padding * 2 auto;
      border-radius: 50%;

      .iconfont {
        @include before(-$size * 4, $size * 1.93, $size * 2);
      }
    }
  }

  //第二行
  &.main_class_2 {
    background-image: url("../images/demo4_bg1.png");
    background-size: 100%;
  }

}
